<script setup lang="ts">
import { contextMenuItems } from '../../src/index.js';
import type { Driver } from '../../src/adapters';

interface Props {
  driver: Driver;
  config: Record<string, unknown>;
  features: unknown;
}

defineProps<Props>();

const customContextMenuItems = [
  ...contextMenuItems,
  {
    id: 'loginfo',
    title: () => 'Log Info',
    action: (
      app: unknown,
      selectedItems: Array<{ basename: string; type: string; path: string }>
    ) => {
      const info = selectedItems.map(
        (i) => `Name: ${i.basename}, Type: ${i.type}, Path: ${i.path}`
      );
      console.log(selectedItems.length + ' item(s) selected:\n', info.join('\n'));
      console.log(selectedItems);
    },
    show: () => true,
    order: 60
  },
];
</script>

<template>
  <vue-finder
    id="my_vuefinder3"
    :driver="driver"
    :config="config"
    :features="features"
    :context-menu-items="customContextMenuItems"
  />
</template>
